<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Coding注册</title>
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/reset.css"/>
    <link rel="stylesheet" href="/static/css/register.css">
    <link rel="stylesheet" href="/static/css/iconfont.css">
</head>
<body>
<div id="box">
    <div class="my_qingquan"><img class="my_img" src="/static/images/logo.jpg" alt=""/></div>
    <h1>Coding注册账号</h1>
    <form novalidate autocomplete="off" action="/register/" method="post" class="form-horizontal case"
          enctype="multipart/form-data">
        <div>
            <label for="{{ form_obj.username.id_for_label }}">{{ form_obj.username.label }}:</label>
            {{ form_obj.username }}
            <span class="help-block">{{ form_obj.username.errors.0 }}</span>
        </div>
        <div>
            <label for="{{ form_obj.password.id_for_label }}">{{ form_obj.password.label }}:</label>
            {{ form_obj.password }}
            <span class="help-block">{{ form_obj.password.errors.0 }}</span>
        </div>

        <div>
            <span for="{{ form_obj.re_password.id_for_label }}">{{ form_obj.re_password.label }}</span>
            {{ form_obj.re_password }}
            <span class="help-block">{{ form_obj.re_password.errors.0 }}</span>
        </div>

        <div>
            <label for="{{ form_obj.email.id_for_label }}">{{ form_obj.email.label }}</label>
            {{ form_obj.email }}
            <span class="help-block">{{ form_obj.email.errors.0 }}</span>

        </div>
        <div>
            <label>头像</label>
            <label for="id_avatar"><img id="avatar-img" src="/static/images/default.png" alt=""></label>
            <input accept="image/*" type="file" name="avatar" id="id_avatar" style="display: none">
            <span class="help-block"></span>
        </div>

        <button type="submit" class="sub" id="reg-submit">注册</button>
    </form>
</div>

<script src="/static/js/jquery-3.3.1.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script>
    // 找到头像的input标签绑定change事件
    $("#id_avatar").change(function () {
        // 1. 创建一个读取文件的对象
        var fileReader = new FileReader();
        // 取到当前选中的头像文件
        // console.log(this.files[0]);
        // 读取你选中的那个文件
        fileReader.readAsDataURL(this.files[0]);  // 读取文件是需要时间的
        fileReader.onload = function () {
            // 2. 等上一步读完文件之后才 把图片加载到img标签中
            $("#avatar-img").attr("src", fileReader.result);
        };
    });
    // AJAX提交注册的数据
    $("#reg-submit").click(function () {
        // 取到用户填写的注册数据，向后端发送AJAX请求
        var formData = new FormData();
        formData.append("username", $("#id_username").val());
        formData.append("password", $("#id_password").val());
        formData.append("re_password", $("#id_re_password").val());
        formData.append("email", $("#id_email").val());
        formData.append("avatar", $("#id_avatar")[0].files[0]);
        formData.append("csrfmiddlewaretoken", $("[name='csrfmiddlewaretoken']").val());

        $.ajax({
            url: "/admin_register/",
            type: "post",
            processData: false,  // 告诉jQuery不要处理我的数据
            contentType: false,  // 告诉jQuery不要设置content类型
            data: formData,
            success:function (data) {
                if (data.status){
                    // 有错误就展示错误
                    // console.log(data.msg);
                    // 将报错信息填写到页面上
                    $.each(data.msg, function (k,v) {
                        // console.log("id_"+k, v[0]);
                        // console.log($("#id_"+k));
                        $("#id_"+k).next("span").text(v[0]).parent().parent().addClass("has-error");
                    })

                }else {
                    // 没有错误就跳转到指定页面
                    location.href = data.msg;
                }
            }
        })
    });

    // 将所有的input框绑定获取焦点的事件，将所有的错误信息清空
    $("form input").focus(function () {
        $(this).next().text("").parent().parent().removeClass("has-error");
    });

    // 给username input框绑定一个失去焦点的事件，失去焦点之后就校验用户名是否已被注册

    $("#id_username").on("input", function () {
        // 取到用户填写的值
        var username = $(this).val();
        // 发请求
        $.ajax({
            url: "/check_username_exist/",
            type: "get",
            data: {"username": username},
            success: function (data) {
                if (data.status){
                    // 用户名已被注册
                    $("#id_username").next().text(data.msg).parent().parent().addClass("has-error");
                }
            }
        })
    })

</script>
</body>
</html>